<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入订单编号">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>
      <div class="item">
        <el-select v-model="status" placeholder="请选择订单状态" @change="getList">
          <el-option
            :key="0"
            label="全部状态"
            :value="null"
          />
          <el-option
            v-for="item in orderStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="订单编号">
        <template slot-scope="scope">
          <span>{{ scope.row.ordersn }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="接收人姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="发货单号">
        <template slot-scope="scope">
          <span>{{ scope.row.sendno }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="接收电话">
        <template slot-scope="scope">
          <span>{{ scope.row.contact }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="接收地址">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单总金额">
        <template slot-scope="scope">
          <span>{{ (scope.row.proprice/100)*scope.row.pronum }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="运费">
        <template slot-scope="scope">
          <span>{{ scope.row.fee }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="状态">
        <template slot-scope="{row}">
          {{
            row.status == 1 ? '待付款' :
            row.status == 2 ? '待发货' :
            row.status == 3 ? '待收货' :
            row.status == 4 ? '已完成' :
            row.status == 5 ? '已取消' :
            row.status == 6 ? '已退' : '未知状态'
          }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="配送方式">
        <template slot-scope="scope">
          <span>{{ scope.row.sendtype }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单备注">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="50">
        <template slot-scope="scope">
        <!--  <el-button type="primary" v-if="scope.row.status == 1" size="small" icon="el-icon-edit" @click="goDoPay(scope.row,1)">确认付款</el-button>
          <el-button type="primary" v-if="scope.row.status == 1" size="small" icon="el-icon-edit" @click="goDoPay(scope.row,2)">取消订单</el-button>
          <el-button type="primary" v-if="scope.row.status == 2 || scope.row.status == 3 || scope.row.status == 4" size="small" icon="el-icon-edit" @click="refOrdShow(scope.row)">退订</el-button> -->
          <div class="caozuo">
            <span v-if="scope.row.status == 2" size="small" icon="el-icon-edit" @click="sendJOrderShow(scope.row)">发货</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!-- 选择支付类型开始 -->
    <!-- <el-dialog title="确认付款(选择支付类型)" :visible.sync="dialogPaytypeVisible">
      <el-radio v-model="paytype" :label="1">钱包支付</el-radio>
      <el-radio v-model="paytype" :label="2">反馈钱包支付</el-radio>
      <el-radio v-model="paytype" :label="3">现金支付</el-radio>
      <div>
        <el-button @click="sumbit">确认</el-button>
      </div>
    </el-dialog> -->
    <!-- 选择支付类型结束 -->

    <!-- 填写发货单号开始 -->
    <el-dialog title="填写发货单号" :visible.sync="dialogSendVisible" center class="user" width="95%">
      <el-form>
        <el-form-item>
          <el-input v-model="sendno" placeholder="请输入发货单号"></el-input>
        </el-form-item>
        <el-button @click="sendJOrder">确认发货</el-button>
      </el-form>
    </el-dialog>
    <!-- 填写发货单号结束 -->

    <!-- 填写退款金额开始 -->
    <!-- <el-dialog title="填写退款金额" :visible.sync="dialogRefVisible">
      <el-input v-model="money" placeholder="请输入退款金额"></el-input>
      <div>
        <el-button @click="sureRef">确认退款</el-button>
      </div>
    </el-dialog> -->
    <!-- 填写退款金额结束 -->
  </div>
</template>

<script>
  import { getJOrder, sendJOrd } from '@/api/order'
  import Pagination from '@/components/Pagination'
  export default {
    name: 'JOrderList',
    components: { Pagination },
    data() {
      return {
        list: [],
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20
        },
        searchcontent: '',
        status: null,
        paytype: 1,
        dialogPaytypeVisible: false,
        dialogSendVisible: false,
        dialogRefVisible: false,
        selectDid: '',
        sendno: '',
        money: 0,
        orderStatus: [
          {value: 1,label: '待付款'},
          {value: 2,label: '待发货'},
          {value: 3,label: '待收货'},
          {value: 4,label: '已完成'},
          {value: 5,label: '已取消'},
          {value: 6,label: '已退'}
        ]
      }
    },
    created() {
      this.getList()
    },
    methods: {
      //获取列表信息
      getList() {
        this.listLoading = true
        const search = { searchcontent: this.searchcontent, status: this.status }
        const postdata = { ...this.listQuery, ...search }
        getJOrder(postdata).then((response) => {
          const { data } = response
          console.log(response, 'getOrder')
          this.list = data.list
          this.total = data.total
          this.listLoading = false
        })
      },
      //确认支付 || 取消订单
      goDoPay(row,dotype) {
        if(dotype==1){//确认支付
          this.selectDid = row.id
          this.dialogPaytypeVisible = true
        }else if(dotype==2){//取消订单
          this.$confirm('确认取消订单吗?', '确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            doPay({ id: row.id, dotype: dotype }).then(res => {
              this.$message({
                type: 'success',
                message: '取消订单成功'
              })
              this.getList()
            })
          }).catch((e) => {
            console.log(e)
            this.$message({
              type: 'info',
              message: '取消操作'
            })
          })
        }
      },
      sumbit() {
        doPay({id: this.selectDid, paytype: this.paytype, dotype: 1 }).then(res=>{
          this.$message({
            type: 'success',
            message: '确认支付成功'
          })
          this.dialogPaytypeVisible = false
          this.getList()
        })
      },
      //发货
      sendJOrderShow(row) {
        this.selectDid = row.id
        this.sendno = null
        this.dialogSendVisible = true
      },
      sendJOrder() {
        sendJOrd({id:this.selectDid,sendno:this.sendno}).then(res => {
          this.$message({
            type: 'success',
            message: '发货成功'
          })
          this.dialogSendVisible = false
          this.getList()
        })
      },
      //退款
      refOrdShow(row) {
        this.selectDid = row.id
        this.money = null
        this.dialogRefVisible = true
      },
      sureRef() {
        refOrd({id:this.selectDid,number:this.money*100}).then(res=>{
          this.$message({
            type: 'success',
            message: '退款成功'
          })
          this.dialogRefVisible = false
          this.getList()
        })
      }
    }
  }
</script>

<style lang="scss">
  .app-container{
    .search{
      width: 400px;
      margin-bottom: 20px
    }
  }
</style>
